|
前言
单独配置stylelint格式校验规则，用于对css进行格式化处理，处理css样式的格式以及样式的摆放顺序，让css属性样式统一风格
settings.json
stylelint 需额外添加vscode 全局参数
"stylelint.validate": [
"css",
// 如果需要格式化scss 就需要在这里添加scss
"scss",
"less",
"postcss"
],
"stylelint.validate": ["css", "scss", "less", "postcss", "vue"],
"stylelint.configFile": ".stylelintrc.js",
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": true
}
复制代码
lint-staged
lint-staged校验css和vue文件
不需要指定校验内容，默认是校验改动内容
"lint-staged": {
"**/*.js": [
"pnpm run test"
"eslint --ignore-pattern '**/*.d.ts' --fix"
],
"**/*.{js,jsx,tsx,ts,less,md,json}": [
"prettier --write"
],
// 添加vue文件，因为里面也有css内容
// 想要支持vue 需要额外安装 stylelint-config-recommended-vue 插件
"**/*.{css,less,scss,vue}": [
"stylelint --fix"
]
},
复制代码
stylelint 装包
// stylelint-config-standard 官方的css通用配置
// stylelint-order stylelint-config-idiomatic-order css排序规则以及插件
// stylelint-config-prettier stylelint-prettier prettier兼容规则以及插件
pnpm install stylelint-config-standard stylelint-config-prettier stylelint stylelint-order stylelint-prettier stylelint-config-idiomatic-order -D
// 如果需要支持scss需额外添加
pnpm install stylelint-config-standard-scss --save-dev
// 支持vue格式化需要额外添加
pnpm install stylelint-config-recommended-vue --save-dev
// 如果需要使用下方webpack的格式化方式需额外添加
pnpm install postcss-html --save-dev
复制代码
.stylelintrc.js
默认配置文件
module.exports = {
// 这边顺序可以适当调整，当前我的顺序是可以正常使用的
// 网上有说把stylelint-prettier/recommended 放到最后
// 我尝试发现prettier放到后面我stylelint的格式化我需要按两次，它们会互相影响
extends: ['stylelint-prettier/recommended', 'stylelint-config-standard',
'stylelint-config-standard-scss', 'stylelint-config-idiomatic-order', ,
'stylelint-config-recommended-vue'],
plugins: ['stylelint-order'],
rules: {},
};
复制代码
webpack插件也支持stylelint格式化
plugins: [
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
template: './src/public/index.html',
}),
new StyleLintPlugin({
customSyntax: 'postcss-html',
files: ['**/*.{vue,html,css,scss,sass,less}'],
failOnError: false,
cache: true,
fix: true,
}),
],
复制代码
|